@import url("https://netdna.bootstrapcdn.com/font-awesome/4.1.0/css/font-awesome.min.css");

body {
background-image: url(../images/fon.jpg);
background-size: 100% 100%;
background-repeat: no-repeat;
}

.div_nav_1, .div_nav_2 {
border-bottom: 0.5px solid #ffffff;
display: flex;
height: 100px;
}

.metro_blog {
margin-left: 55px;
display: inline-flex;
align-items: center;
animation: metro_blog 3s infinite;
}

@keyframes metro_blog {
0%, 100% {
	transform: rotateX(0deg);
}
50% {
	transform: rotateX(-180deg);
}
}

.metro {
color: #595959;
}

ul {
display: inline-flex;
align-items: center;
position: absolute;
top: 30px;
}

.div_nav_2 ul li {
list-style-type: none;
font-size: 20px;
}

ul .li_nav a {
text-decoration: none;
color: black;
padding: 5px 20px 5px 20px;
display: inline-block;
transition: .5s;
}
.li_nav {
border-right:0.5px solid #ffffff; 
}
.li_nav:first-child {
border-left: 0.5px solid #ffffff;
}
ul .li_nav a:hover {
text-decoration: none;
color: white;
background-color: #373737;
transition: .5s;
}






.div_apple, .div_ipad {
color: #5D5D5D;
height: auto;
padding-top: 100px;
}

.apple1, .apple2, .video {
margin-left: 55px;
}

.video {
color: #FFFFFF;
background-color: #373737;
display: inline-flex;
padding: 0 20px 0 20px;
border-radius: 5px;
}

.video:hover {
text-decoration: none;
color: #FFFFFF;
}

.fa-video-camera {
position: relative;
right: 10px;
top: 4px;
}

.ipad {
width: 700px;
height: auto;
transition: 1.5s;
}

.ipad:hover {
transition: 1.5s;
transform: rotateY(180deg);
}


.container {
margin-top: 50px;
}
.div_1 {
	/* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#eab92d+45,c79810+73,c79810+75,c79810+75,c79810+88 */
background: #eab92d; /* Old browsers */
background: -moz-radial-gradient(center, ellipse cover, #eab92d 45%, #c79810 73%, #c79810 75%, #c79810 75%, #c79810 88%); /* FF3.6-15 */
background: -webkit-radial-gradient(center, ellipse cover, #eab92d 45%,#c79810 73%,#c79810 75%,#c79810 75%,#c79810 88%); /* Chrome10-25,Safari5.1-6 */
background: radial-gradient(ellipse at center, #eab92d 45%,#c79810 73%,#c79810 75%,#c79810 75%,#c79810 88%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#eab92d', endColorstr='#c79810',GradientType=1 ); /* IE6-9 fallback on horizontal gradient */

padding-top: 100px;
padding-bottom: 50px;
text-align: center;
}

.img_phone {
position: relative;
right: 20px;
animation: img_phone 2s infinite; 
}

@keyframes img_phone {
0%, 100% {
	transform: rotate(-30deg);
}
50% {
	transform: rotate(30deg);
}
}

.img_screen {
position: relative;
left:20px;
animation: img_screen 2.5s infinite; 
}

@keyframes img_screen {
0%, 100% {
	transform: skew(10deg);
}
50% {
	transform: skew(-10deg);
}
}

.div_2 {
text-align: justify;
}

.div_3 {
text-align: center;
}

.guide {
color: #8FC800;
font-weight: bolder;
font-size: 50px;
}

.img_main, .img_copy, .img_css {
position: relative;
}

.img_main {
top: 35px;
transition: 2s;
}

.img_main:hover {
transform: translate(-70px, 50px) scale(1.5) rotate(-360deg);
transition: 2s;
}

.img_copy {
top: 60px;
right:  40px;
transition: .5s;
}

.img_copy:hover {

transform: scale(1.5);
z-index: 111;
transition: .5s;
}

.img_css {
top: 70px;
transition: 2s;
}

.img_css:hover {
transition: 2s;
transform: translate(-500px, 50px) scale(1.5) rotate(-720deg) skew(15deg);
}

.div_main_1, .div_main_2, .div_main_3 {
text-align: justify;
}

footer {
background-color: #393A39;
}

.div_foot1, .div_foot2 {
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
padding: 15px;
}

i {
font-family: fontawesome !important;

}

.fa-facebook-square, .fa-twitter-square, .fa-youtube {
padding: 10px;
}

.icons {
color: #FFFFFF;
}

.fa-facebook-square:hover, .fa-twitter-square:hover, .fa-youtube:hover {
text-decoration: none;
color: black;
background-color: #ffffff;
border-radius: 50%;
}